<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <h1>我的微博列表</h1>
  <div>
      <div v-for="weibo in arr">
          <h3>{{weibo.content}}</h3>
          <p>发布于：{{weibo.created}}<br>
              <a href="javascript:void(0)" @click="del(weibo.id)">删除</a>
          </p>
      </div>
  </div>
  <!--引入axios和vue-->
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script src="https://cdn.staticfile.org/moment.js/2.24.0/moment.min.js"></script>
  <script>
      let v = new Vue({
          el:"body>div",
          data:{
              arr:[]
          },
          created:function () {
              //发起异步请求获得当前登录用户发布的所有微博
              axios.get("/weibo/selectMyself").then(function (res) {
                  v.arr = res.data;
                  //遍历微博数组，修改每个微博对象的created属性
                  for(let weibo of v.arr){
                      weibo.created
                          = moment(weibo.created).format("YYYY年MM月DD日 HH:mm:ss");
                  }
              })
          },
          methods:{
              del:function (id) {
                  if(confirm("您确认删除吗？")){
                      axios.get("/weibo/delete?id="+id).then(function () {
                          location.reload();//刷新本页面
                      })
                  }

              }
          }
      })
  </script>

</body>
</html>